// 条件渲染指令
<template>
  <div class="test5">
    <h3>条件渲染指令</h3>
    <button @click="showOrHidden">显示或隐藏</button>
    <div>v-if演示：</div>
    <!-- v-if：动态创建和移除元素来实现元素的显示和隐藏 -->
    <p v-if="flag">v-if控制显隐</p>
    <hr />

    <div>v-show演示：</div>
    <!-- v-show：动态为元素添加或移除display: none 样式来实现元素的显示和隐藏 -->
    <p v-if="flag">v-show控制显隐</p>
    <hr />
  </div>
</template>

<style lang="scss">
.test5 {
  color: black;
  h3 {
    color: red;
  }
  div {
    color: blue;
  }
}
</style>

<script>
export default {
  name: "Test5",
  // data对象是要渲染到页面上的数据
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    showOrHidden() {
      this.flag = !this.flag;
    },
  },
};
</script>
